import { Component, Emit, Prop, Watch } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import { getRoleList } from '@/api/system'
import type { RoleDto } from '@/api/system/types'

@Component
export class RoleList extends Render {
    @Prop() roleList!: RoleDto[]
    @Prop() roleId!: number

    curId = 0

    @Watch('roleId')
    hanldeWatchRoleId(val: number) {
        this.curId = val
    }

    @Emit('update:roleId')
    handleUpdateRoleId(roleId: number) {
        return roleId
    }

    onChange(item: RoleDto) {
        this.curId = item.roleId
        this.handleUpdateRoleId(item.roleId)
    }

    render() {
        return <div class="overflow-auto h-full">
            {
                this.roleList.map((item) => {
                    return <div onClick={() => this.onChange(item)} class={`${this.curId === item.roleId ? 'bg-blue-100 bg-opacity-10 border-l-blue-default text-blue-default' : ''} py-16px pl-10px border-l-5 border-l-solid border-l-white cursor-pointer`}>
                        {item.roleName}
                    </div>
                })
            }
        </div>
    }
}

export default toNative<{roleList: RoleDto[]}, {}>(RoleList)